@import "@/style/var.less";

.studyed-step-wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .step-content {
    position: relative;
    display: flex;
    overflow-y: auto;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-height: 410px;
    width: 100%;
    padding: 24px 100px 0; /* no */
    background-color: #fff;
    border-radius: 10px; /* no */
    .scene-hidden {
      visibility: hidden;
    }
    .pass-icon {
      width: 80px; /* no */
      position: absolute;
      right: 0;
      top: 0;
      img {
        width: 100%;
      }
    }
    .step-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .scene-title {
      min-height: 100px;
      word-wrap: break-word;
      .no-rem-fontsize(30px);
      font-weight: 700;
      text-align: left;
      span {
        display: inline-block;
        padding: 0 4px;
      }
      .keys-words {
        color: #ffa64d;
      }
    }
    .step-text {
      flex: 1;
    }
    .scene-translation {
      height: 100px;
      .no-rem-fontsize(24px);
      text-align: left;
    }
    .scene-play {
      height: 126px;
      width: 88px;
      margin: 0 auto;
      img {
        width: 88px; /* no */
        height: 82px;
      }
      & > p {
        .no-rem-fontsize(20px);
        color: @primary-color;
      }
    }
    .scene-byhand {
      display: flex;
      height: 126px;
      justify-content: center;
      & > div:nth-child(1) {
        img {
          width: 88px; /* no */
          height: 82px;
        }
        & > p {
          color: #ff5971;
        }
      }
      & > div:nth-child(2) {
        margin-left: 124px;
        img {
          width: 80px; /* no */
          height: 80px;
        }
        & > p {
          color: #27bfa3;
        }
      }
    }
    .play-btn {
      img {
        width: 100px; /* no */
      }
    }
  }
  .finish-bottom {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    .voice-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: @primary-color;
      .no-rem-fontsize(14px);
      .voice-range {
        width: 140px; /* no */
        margin: 0 16px;
      }
      .play-num {
        display: inline-block;
        width: 24px; /* no */
        height: 24px; /* no */
        line-height: 24px; /* no */
        border-radius: 50%;
        border: 2px solid @primary-color; /* no */
        margin-left: 14px;
      }
    }
    .study-next-btn {
      margin-left: 20px;
    }
  }
}
